<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>
<style>
:host {
   background-color: red;
}
</style>
<body class='mytheme'>
  <div>
    <div id='sandbox'></div>
  </div>
  <pre id='console'></pre>
<script>
description('Test whether :host matches a shadow host correctly.');

var sandbox = document.getElementById('sandbox');

function cleanUp() {
    sandbox.innerHTML = '';
}

debug(':host out of shadow tree should not match any shadow hosts.');

sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('div', {},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

cleanUp();

debug(':host with * should not match any shadow hosts.');

sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode('*:host { background-color: green; }')),
            createDOM('div', {},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

cleanUp();

debug(':host with tag selector should not match any shadow hosts.');

sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode('div:host { background-color: green; }')),
            createDOM('div', {},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

cleanUp();

debug(':host with class selector should not match any shadow hosts.');

sandbox.appendChild(
    createDOM('div', {'id': 'host', 'class': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode('.host:host { background-color: green; }')),
            createDOM('div', {},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

cleanUp();

debug(':host with id selector should not match any shadow hosts.');

sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode('#host:host { background-color: green; }')),
            createDOM('div', {},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

cleanUp();

debug(':host with attribute selector should not match any shadow hosts.');

sandbox.appendChild(
    createDOM('div', {'id': 'host', 'foo': 'bar'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode('[foo=bar]:host { background-color: green; }')),
            createDOM('div', {},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

cleanUp();

debug(':host in a shadow tree should match its shadow host.');

sandbox.appendChild(
    createDOM('div', {'id': 'host', 'class': 'foobar'},
        createShadowRoot(
            createDOM('style', {},
               document.createTextNode(':host(div.foobar) { background-color: green; }')),
            createDOM('div', {},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host', 'rgb(0, 128, 0)');

cleanUp();

debug(':host with :host-context in a shadow tree should match its shadow host.');

sandbox.appendChild(
    createDOM('div', {'id': 'host', 'class': 'foobar'},
        createShadowRoot(
            createDOM('style', {},
               document.createTextNode(':host(:host-context(body.mytheme)) { background-color: green; }')),
            createDOM('div', {},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host', 'rgb(0, 128, 0)');

cleanUp();

debug(':host takes a simple selector and matches when the simple selector matches.');

sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host(div#host) { background-color: green; }')),
            createDOM('div', {},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host', 'rgb(0, 128, 0)');

cleanUp();

debug(':host matches a shadow host in just a nested shadow tree, not all enclosing shadow trees.');

sandbox.appendChild(
    createDOM('div', {'id': 'host1'},
        createShadowRoot(
            createDOM('div', {'id': 'host2'},
                createShadowRoot(
                    createDOM('style', {},
                        document.createTextNode(':host { background-color: green; }')),
                    createDOM('div', {},
                        document.createTextNode('Hello')))))));

backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)');

debug(':host is updated when its matched host changes className or id.');

sandbox.appendChild(
    createDOM('div', {'id': 'host', 'class': 'sometheme' },
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host(.sometheme) { background-color: green; }')),
            createDOM('div', {},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
document.getElementById('host').className = 'mytheme';
backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

cleanUp();

sandbox.appendChild(
    createDOM('div', {'id': 'host', 'class': 'sometheme'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host(div#host.sometheme) { background-color: green; }')),
            createDOM('div', {},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
var host = document.getElementById('host');
host.id = 'host2';
backgroundColorShouldBe('host2', 'rgba(0, 0, 0, 0)');

cleanUp();

debug('Compare :host with :host.');

sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host(:is(div:host, div#sandbox)) { background-color: green; }')),
            createDOM('style', {},
                document.createTextNode(':host(body.mytheme) { background-color: red; }')),
            createDOM('div', {},
                document.createTextNode('Hello')))));

// :host(:is(div:host, div#sandbox)) wins, because div#sandbox > body.mytheme.
backgroundColorShouldBe('host', 'rgb(0, 128, 0)');

cleanUp();

sandbox.appendChild(
    createDOM('div', {'id': 'host', 'class': 'foobar' },
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host(div:host, div#nomatch) { background-color: green; }')),
            createDOM('style', {},
                document.createTextNode(':host(div.foobar) { background-color: red; }')),
            createDOM('div', {},
                document.createTextNode('Hello')))));

// :host(div.foobar) wins, because div:host < div.foobar.
backgroundColorShouldBe('host', 'rgb(255, 0, 0)');

cleanUp();

// Test for specificiy of ":host(...) > ...".
sandbox.appendChild(
    createDOM('div', {'id': 'host', 'class': 'foobar' },
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host(:is(div:host, div#host:host)) > div { background-color: green; }')),
            createDOM('style', {},
                document.createTextNode(':host(div.foobar) > div { background-color: red; }')),
            createDOM('div', {'id': 'target'},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');

cleanUp();

sandbox.appendChild(
    createDOM('div', {'id': 'host', 'class': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host(:is(div:host, div#host.host:host)) > div { background-color: green; }')),
            createDOM('style', {},
                document.createTextNode(':host(div) > div#target { background-color: red; }')),
            createDOM('div', {'id': 'target'},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');

cleanUp();

sandbox.appendChild(
    createDOM('div', {'id': 'host', 'class': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host(div:host(div:host(div:host(div:host)))) > div { background-color: green; }')),
            createDOM('style', {},
                document.createTextNode(':host(div) > div { background-color: red; }')),
            createDOM('div', {'id': 'target'},
                document.createTextNode('Hello')))));

backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');

cleanUp();

// :host.foo {} should never match (whereas :host(.foo) {} should).
sandbox.appendChild(
    createDOM('div', {'id': 'host', 'class': 'foo'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host.foo { background-color: green; }')))));

backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

cleanUp();

</script>
</body>
